<script setup lang="ts">
import { ref } from 'vue';
import passoword from './components/passoword.vue';
import mobile from './components/mobile.vue'

//定义用来切换显示的数据
const tabMetas = [
  { title: '密码登录', subTitle: '验证码登录' },
  { title: '验证码登录', subTitle: '密码登录' }
]
// 通过索引来控制 到底显示哪个
const index=ref(1)
// 切换当前索引的逻辑
const changeIndex=()=>{
  // 0 - 1
  // 1 - 0
  // 0-1=-1,1-1=0
  // Math.abs 取绝对值
  index.value=Math.abs(index.value-1)
}

</script>
<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{tabMetas[index].title}}</view>
      <view @click="changeIndex" class="type">
        <text>{{tabMetas[index].title}}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>
  </view>
  <view class="content-box">
     <mobile v-if="index===1"/>
     <passoword v-else/>
  </view>
  <!-- 社交账号登录 -->
  <view class="social-login">
    <view class="legend">
      <text class="text">其它方式登录</text>
    </view>
    <view class="social-account">
      <view class="icon">
        <uni-icons color="#00b0fb" size="30" type="qq" />
      </view>
      <view class="icon">
        <uni-icons color="#fb6622" size="30" type="weibo" />
      </view>
      <view class="icon">
        <uni-icons color="#07C160" size="30" type="weixin" />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';

.content-box{
  padding: 10rpx;
}
</style>
